<template>
  <!-- 所有课程的界面 -->
  <div class="course-container">
    <el-tabs style="height: 100%" v-model="activeName" type="border-card">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.label"
        :label="tab.label"
        :name="tab.name"
      >
        <slot></slot>
        <el-row :gutter="20" v-if="courseArr.length !== 0">
          <el-col :span="6" v-for="item in courseArr" :key="item.course_id">
            <course-box
              :course="item"
              @click.native="navigateToCourseDetail(item)"
            >
              <!-- 下面的role由父组件传递，写为计算属性 -->
              <el-button @click="operCourse($event, item)" type="primary"
                >{{ tip }}
              </el-button>
            </course-box>
          </el-col>
        </el-row>
        <el-empty v-else description="暂无数据"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CourseBox from "../components/CourserBox";
export default {
  name: "Course",
  components: { CourseBox },
  methods: {
    // 下面这个方法有问题
    navigateToCourseDetail(e) {
      // console.log(e)
      // 这一部分可能有问题
      const { image: cover, course_id } = e;
      if (this.activeName === "waiting") {
        this.$message({
          message: "课程还未开始哦",
          type: "warning",
        });
        return;
      }
      this.$store.commit("studyAbout/SET_COURSE", {
        cover,
        course_id,
      });

      // 如果没有问题
      this.$router.push({
        name: "detail",
      });
    },

    operCourse(event, course) {
      // console.log(event)
      event.stopPropagation();
      const { course_id } = course;

      if (this.tip === "退课") {
        // console.log("发布退课命令");
        const { student_id } = this.user;
        this.axios
          .get(`${this.$reqPrefix}/dropCourse`, {
            params: { student_id, course_id },
          })
          .then((res) => {
            this.$codeJudge(res.data.code, "退课成功", "退课失败");
            //  还要操作一下本地数据
            this.dropCourse(course_id);
          });
      } else {
        // console.log("发布删除的命令");
        const { teacher_id } = this.user;
        this.axios
          .get(`${this.$reqPrefix}/deleteCourse`, {
            params: {
              teacher_id,
              course_id,
            },
          })
          .then((res) => {
            this.$codeJudge(res.data.code);
            //  还要操作一下本地数据
            this.dropCourse(course_id);
          });
      }
    },
  },
  props: ["tip", "curriculum", "dropCourse"],
  data() {
    return {
      tabs: [
        {
          label: "进行中",
          name: "going",
        },
        {
          label: "待开始",
          name: "waiting",
        },
        {
          label: "已结束",
          name: "finished",
        },
      ],
      activeName: "going",
    };
  },
  computed: {
    courseArr() {
      const now = Date.now();
      let ca = [];
      if (this.activeName === "going") {
        //如果是进行中
        //
        ca = this.curriculum.filter(
          (e) => now > Date.parse(e.start_date) && now < Date.parse(e.end_date)
        );
      } else if (this.activeName === "waiting") {
        //如果是待开始
        ca = this.curriculum.filter((e) => now < Date.parse(e.start_date));
      } else if (this.activeName === "finished") {
        //如果是已完成
        ca = this.curriculum.filter((e) => now > Date.parse(e.end_date));
      }
      return ca;
    },
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("userInfo"));
  },
};
</script>

<style lang='less' scoped>
.course-container {
  height: 100%;

  .el-tabs {
    :deep(.el-tabs__content) {
      text-align: left;
      height: calc(100% - 69px);

      .el-tab-pane {
        height: 100%;

        .el-row {
          height: calc(100% - 40px);
          overflow: auto;

          .el-col {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>